<template>
  <a-layout>
    <a-spin tip="加载中.." :spinning="spinning" :delay="300">
      <a-row type="flex" class="topline">
        <a-icon type="left" style="font-size:20px;position" @click="goback" />
        <div class="left2" style="cursor:pointer;" @click="goback">返回</div>
        <h3>公告详情</h3>
        <a-icon type="add" />
      </a-row>
      <a-layout-content>
        <a-table
          :columns="noticeColumns"
          :data-source="noticelist"
          :scroll="{ y: 320 }"
          row-key="id"
          style="margin: 12px auto 0;width: 95%;"
        >
          <span slot="publishEmpRangeIsAll" slot-scope="text">
            <span>
              {{ text === true ? "全公司" : "部分员工" }}
            </span>
            <span class="tc-theme" @click="checkEmpTable">查看</span>
          </span>
          <span slot="publishEmpTypeIsAll" slot-scope="text">
            <span>
              {{ text === true ? "全部" : "部分" }}
            </span>
            <span class="tc-theme" @click="checkEmpTypelist">查看</span>
          </span>
        </a-table>
        <div class="notice-editor-wrapper">
          <div class="ql-editor-content">
            <div class="preview-box" :style="bgImage">
              <div class="notice-content">
                <div class="notice-company-title">
                  {{ currentNotice.title }}
                </div>
                <div class="notice-company-date">
                  <span>{{ currentNotice.publishUserName }}</span>
                  <span>{{ currentNotice.publishDate | formatDateAll() }}</span>
                </div>
                <div class="notice-company-content" v-html="currentNotice.content" />
              </div>
            </div>
          </div>
          <div v-if="currentNotice.isOnline" class="btnline">
            <a-button v-if="!currentNotice.isOnline" type="primary" @click="onlineHandle">上线</a-button>
            <a-button v-if="currentNotice.isOnline" type="text" @click="offlineHandle">下线</a-button>
            <a-button v-if="!currentNotice.isTop" type="primary" @click="setTopHandle">置顶</a-button>
            <a-button v-if="currentNotice.isTop" type="text" @click="concelTop">
              取消置顶
            </a-button>
          </div>
          <div v-if="!currentNotice.isOnline" class="btnline">
            <a-button v-if="!currentNotice.isOnline" type="primary" @click="onlineHandle">重新上线</a-button>
          </div>
        </div>
      </a-layout-content>
      <!-- 查看员工选择表格 -->
      <a-modal title="已选择员工" :visible="empTableVisible" class="hidebtn" width="788px" @cancel="empTableVisible = false">
        <!-- 员工的查看 表格 -->
        <a-table
          :columns="memberColumn"
          :data-source="currentNotice.empInfoList"
          :scroll="{ y: 320 }"
          row-key="id"
          style="margin-top: 12px;width: 95%;"
        />
      </a-modal>
      <!-- 选择性质范围 -->
      <a-modal title="选择性质范围" :visible="natureVisible" class="hidebtn" width="488px" @cancel="natureVisible = false">
        <div class="select-container">
          <a-checkbox-group v-model="checkedList">
            <a-row>
              <a-col v-for="(item, index) in type" :key="index" :span="6">
                <a-checkbox :value="item.value" :disabled="isHandle">{{ item.label }}</a-checkbox>
              </a-col>
            </a-row>
          </a-checkbox-group>
        </div>
      </a-modal>
      <!-- 下线 -->
      <a-modal
        title="发布公告"
        :visible="offlineVisible"
        class="notice-modal"
        width="468px"
        @ok="confirmOffline"
        @cancel="offlineVisible = false"
      >
        <div class="select-container">
          <p class="publish-title">请选择公告下线方式</p>
          <a-radio-group v-model="isOfflineNow">
            <a-row>
              <a-radio :value="true">立即下线</a-radio>
            </a-row>
            <a-row class="mt12">
              <a-radio :value="false">定时下线</a-radio>
              <a-date-picker
                format="YYYY-MM-DD HH:mm:ss"
                :show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }"
                @change="handleChange"
              />
            </a-row>
          </a-radio-group>
        </div>
      </a-modal>
      <!-- 上线 -->
      <!-- 下线 -->
      <a-modal
        title="发布公告"
        :visible="onlineVisible"
        class="notice-modal"
        width="468px"
        @ok="confirmOnline"
        @cancel="onlineVisible = false"
      >
        <div class="select-container">
          <p class="publish-title">请选择公告上线方式</p>
          <a-radio-group v-model="isPublishNow">
            <a-row>
              <a-radio :value="true">立即上线</a-radio>
            </a-row>
          </a-radio-group>
        </div>
      </a-modal>
      <!-- 置顶 -->
      <a-modal
        title="置顶"
        :visible="cancelTopVisible"
        class="notice-modal"
        width="488px"
        @ok="confirmCancelTop"
        @cancel="cancelTopVisible = false"
      >
        <div class="tips">
          {{ setTopTip }}
        </div>
      </a-modal>
    </a-spin>
  </a-layout>
</template>
<script>
import { formatDateAll } from "@/utils/index";
import { getNoticeById, topNotice, cancelTop, offlineNotice, onlineNotice } from "@/api/company/index";
const noticeColumns = [
  {
    title: "发布人",
    dataIndex: "publishUserName",
    width: 200,
    customRender: (text, record, index) => {
      return text != null ? text : "--";
    }
  },
  {
    title: "查看可见范围",
    dataIndex: "publishEmpRangeIsAll",
    width: 200,
    scopedSlots: { customRender: "publishEmpRangeIsAll" }
  },
  {
    title: "可看员工性质范围",
    dataIndex: "publishEmpTypeIsAll",
    width: 200,
    scopedSlots: { customRender: "publishEmpTypeIsAll" }
  }
];
const memberColumn = [
  {
    title: "员工姓名",
    dataIndex: "name",
    align: "center"
  },
  {
    title: "部门",
    dataIndex: "depName",
    align: "center",
    customRender: (text, row, index) => {
      return text != null ? text : "--";
    }
  },
  {
    title: "岗位",
    dataIndex: "positionName",
    align: "center",
    customRender: (text, row, index) => {
      return text != null ? text : "--";
    }
  },
  {
    title: "手机号码",
    dataIndex: "phone",
    align: "center",
    width: 250,
    customRender: (text, row, index) => {
      return text != null ? text : "--";
    }
  }
];
export default {
  filters: {
    formatDateAll
  },
  data() {
    return {
      spinning: false,
      noticeColumns,
      memberColumn,
      bgImage: {
        backgroundImage: "url(" + require("@/assets/img/iphone.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%"
      },
      noticeId: "",
      currentNotice: {},
      noticelist: [],
      checkedList: [],
      empTableVisible: false,
      natureVisible: false,
      offlineVisible: false,
      onlineVisible: false,
      cancelTopVisible: false,
      isOfflineNow: true,
      isPublishNow: true,
      isHandle: true,
      setTopTip: "确定将该公告取消置顶吗？",
      type: [
        { value: 1, label: "全职", name: "countFullTime" },
        { value: 2, label: "实习", name: "countInternship" },
        { value: 3, label: "外包", name: "countOutSource" },
        { value: 4, label: "劳务派遣", name: "countLabour" },
        { value: 5, label: "顾问", name: "countAdviser" },
        { value: 6, label: "退休返聘", name: "countRehireAfter" },
        { value: 0, label: "无工作性质", name: "countNoType" }
      ]
    };
  },
  created() {
    this.noticeId = this.$route.query.id;
    this.getNoticeById(this.noticeId);
  },
  methods: {
    getNoticeById(noticeId) {
      this.spinning = true;
      getNoticeById(noticeId)
        .then(res => {
          this.noticelist = [];
          this.currentNotice = res.data;
          this.noticelist.push(res.data);
          this.isHandle = true;
          if (this.currentNotice.publishEmpTypeIsAll === true) {
            this.checkedList = [0, 1, 2, 3, 4, 5, 6];
          } else {
            this.checkedList = this.currentNotice.publishEmpType;
          }
        })
        .finally(() => {
          this.spinning = false;
        });
    },
    offlineHandle() {
      this.offlineVisible = true;
      this.isOfflineNow = true;
    },
    confirmOffline() {
      var offlinedata = {
        // isTop: false,
        isOfflineNow: this.isOfflineNow,
        offlineDate: this.offlineDate
      };
      offlineNotice(this.currentNotice.id, offlinedata).then(res => {
        this.offlineVisible = false;
        this.$message.success("下线成功");
        this.getNoticeById(this.noticeId);
      });
    },
    onlineHandle() {
      this.onlineVisible = true;
      this.isPublishNow = true;
    },
    confirmOnline() {
      onlineNotice(this.currentNotice.id).then(res => {
        this.onlineVisible = false;
        this.$message.success("上线成功");
        this.getNoticeById(this.noticeId);
      });
    },
    concelTop() {
      this.setTopTip = "确定将该公告取消置顶吗？";
      this.cancelTopVisible = true;
    },
    setTopHandle() {
      this.setTopTip = "确定将该公告置顶吗？";
      this.cancelTopVisible = true;
    },
    confirmCancelTop() {
      if (this.currentNotice.isTop === true) {
        cancelTop(this.currentNotice.id).then(res => {
          this.cancelTopVisible = false;
          this.$message.success("取消置顶成功");
          this.getNoticeById(this.noticeId);
        });
      } else {
        topNotice(this.currentNotice.id).then(res => {
          this.cancelTopVisible = false;
          this.$message.success("置顶成功");
          this.getNoticeById(this.noticeId);
        });
      }
    },
    checkEmpTable() {
      this.empTableVisible = !this.empTableVisible;
    },
    checkEmpTypelist() {
      this.natureVisible = !this.natureVisible;
    },
    handleChange(value, dateString) {
      this.isOfflineNow = false;
      this.offlineDate = dateString;
    },
    goback() {
      this.$router.push({
        path: "/notice/enterprise"
      });
    }
  }
};
</script>
<style lang="scss">
.left2 {
  z-index: 3;
  left: 50px;
  position: absolute;
  color: #595959;
  font-size: 16px;
}
.hidebtn {
  .ant-modal-footer {
    display: none;
  }
}
</style>
